<template>
    <div class="box">
        <!-- 头像等信息 -->
        <div class="info">
            <img src="@/assets/1.jpg" alt="" class="avatar" />
            <div class="middle">
                <div class="name">火星网友</div>
                <div class="date">2小时前</div>
            </div>
            <div class="btn" @click="sendComment">回复</div>
        </div>
        <!-- 如果有,parent 子组件 -->
        <Parent :parentData="commentData.parent" v-if="commentData.parent" />
        <!-- 评论内容 -->
        <div class="mainContent">
            {{ commentData.content }}
        </div>
    </div>
</template>

<script>
    import Parent from "./Parent";
    import eventBus from "../../utils/eventBus";
    export default {
        props: ["commentData"],
        components: {
            Parent,
        },
        methods: {
            sendComment() {
                // 引入了一个 eventBus vue 实例
                // 可以用 $emit 给这个实例触发事件
                eventBus.$emit("sendMsg", this.commentData.id);
            },
        },
    };
</script>

<style lang="less" scoped>
    .box {
        padding: 10 /360 * 100vw;
        border-bottom: 1px solid #ccc;
        .info {
            margin-bottom: 4 /360 * 100vw;
            display: flex;
            align-items: center;
            .avatar {
                width: 35 /360 * 100vw;
                height: 35 /360 * 100vw;
                border-radius: 50%;
                object-fit: cover;
            }
            .middle {
                flex-grow: 1;
                padding-left: 10 /360 * 100vw;
                font-size: 16 /360 * 100vw;
                color: #333;
                .date {
                    font-size: 14 /360 * 100vw;
                    color: #888;
                }
            }
        }
        .btn {
            font-size: 14 /360 * 100vw;
            color: #888;
        }
        .mainContent {
            font-size: 16 /360 * 100vw;
            color: #333;
            margin-top: 6 /360 * 100vw;
        }
    }
</style>